<template>
	<div class="shopcar-container">	
		<!-- 商品列表 -->
		<div class="goods-list">

			<div class="mui-card" v-for="(item,i) in goodslist" :key="item.cid">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch 
						v-model="$store.getters.getGoodsSelected[item.id]"
						@change="selectedChanged(item.id , $store.getters.getGoodsSelected[item.id])"
						></mt-switch>
						<img :src="item.img_url">
						<div class="info">
							<h1>{{item.title}}</h1>
							<p>
								<span class="price">￥{{item.sell_price}}&nbsp;&nbsp;&nbsp;</span>
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>&nbsp;&nbsp;
								<!-- 如果从购物车中获取商品的数据 -->
								<!-- 1我们可以先创建一个空对象，然后循环购物车中所有商品的信息，把当前循环这条商品的Id
									作为对象的属性名，count值作为对象的属性值，这样，当把所有的商品循环一遍，就会得到
									一个对象:{88:2,89:1,90:4}-->
								<a href="#" @click.prevent="remove(item.id,i)">删除</a>
							</p>
						</div>
					</div>
				</div> 
			</div>

		</div>

		<!-- 结算区域 -->
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总结不含运费</p>
							<p>已勾选商品<span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span>件，
							总价<span class="red">{{$store.getters.getGoodsCountAndAmount.amount}}</span> </p>
						</div>
						<mt-button type="danger">去结算</mt-button>
					</div>
				</div>
		</div>
	</div>
</template>
<script>
	import numbox from '../subcomponents/shopcar_numbox.vue'
	export default{
		data(){
			return{
				goodslist:[] //购物车中所有的商品数据
			}
		},
		components:{
			numbox
		},
		created(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){ 
				//获取到store中所有的id，然后拼接出一个用逗号分隔的字符串
				var idArr = [] ;
				this.$store.state.car.forEach(item=>idArr.push(item.id));
				//如果购物车中没有商品，则直接返回，不需要请求数据接口,否则会报错
				if(idArr.length <= 0 ){
					return;
				}
				//获取购物车商品列表
				this.$http.get("goodscar/" + idArr.join(',')).then(result=>{
					if(result.body.code === 0){
						this.goodslist = result.body.data;
					}
				});
			},
			remove(id,index){
				//点击删除，把商品从store中根据传递的ID删除 ，同时把当前组件中的goodslist中对应要删除的那个商品
				//使用index来删除
				this.goodslist.splice(index,1);
				this.$store.commit('removeFormCar',id);
			},
			selectedChanged(id,val){
				//每当点击开关，把最新的开关状态同步到store中
				console.log(id + "---" + val);
				this.$store.commit('updateGoodsSelected',{id,selected:val});
			}
		}

	}
</script> 
<style lang="scss" scoped>
	.shopcar-container{
		background-color: #eee;
		overflow: hidden;
	
		.goods-list{
			.mui-card-content-inner{
				display: flex;
				align-items:center;
			}
			img{
				width:80px;
				height: 80px;
			}
			h1{
				font-size:13px;
			}
			.info{
				/*  display: flex;
				flex-direction:column;
				justify-content: space-between; */
				.price{
					color: red;
				}
			}
		}
		.jiesuan{
			display: flex;
			justify-content:space-between;
			.red{
				color:red;
				font-weight: bold;
				font-size: 20px;
			}
		}
	}
</style>